<template>
  <view>
    <u-navbar title="发表评价" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333"></u-navbar>
    <view class="" style="margin: 23rpx 28rpx; background: #fff; border-radius: 20rpx; display: flex; padding: 36rpx 18rpx" v-for="(i, k) in list.order_goods" :key="k">
      <view class="">
        <image :src="img_url + i.specs_image" mode="aspectFill" style="width: 148rpx; height: 148rpx; border-radius: 20rpx"></image>
      </view>

      <view class="" style="padding-left: 18rpx">
        <view class="" style="font-size: 28rpx">
          {{ i.goods_name }}
        </view>
        <view class="" style="font-size: 26rpx; color: #666; padding-top: 26rpx">{{ i.specs_name }}*{{ i.goods_num }}</view>
      </view>
    </view>
    <!-- 产品评级 -->
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="padding: 27rpx 36rpx; font-size: 30rpx; font-weight: bold">产品评级</view>
      <view class="" style="display: flex; align-items: center">
        <view class="" style="font-size: 28rpx; padding-right: 31rpx; padding-left: 35rpx">物流速度</view>
        <u-rate :count="count" v-model="value" active-color="#FFC149"></u-rate>
      </view>
      <view class="" style="display: flex; align-items: center; padding-top: 25rpx">
        <view class="" style="font-size: 28rpx; padding-right: 31rpx; padding-left: 35rpx">服务态度</view>
        <u-rate :count="count" v-model="value1" active-color="#FFC149"></u-rate>
      </view>
      <view class="" style="display: flex; align-items: center; padding-top: 25rpx; padding-bottom: 53rpx">
        <view class="" style="font-size: 28rpx; padding-right: 31rpx; padding-left: 35rpx">商品质量</view>
        <u-rate :count="count" v-model="value2" active-color="#FFC149"></u-rate>
      </view>
    </view>

    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="font-size: 30rpx; padding: 28rpx 0 25rpx 35rpx; font-weight: bold">评价内容</view>
      <view class="" style="margin: 0 28rpx">
        <u-input v-model="values" type="textarea" :border="true" height="100" :auto-height="true" />
      </view>
      <view class="" style="padding: 28rpx">
        <u-upload :action="action" :file-list="fileList" @on-uploaded="onUploaded" max-count="3" :form-data="formData"></u-upload>
      </view>
    </view>
    <view
      slot="right"
      style="width: 690rpx; height: 90rpx; text-align: center; line-height: 90rpx; background-color: #a6a6a6; color: #fff; border-radius: 20rpx; margin: 30rpx"
      @tap="fabu"
    >
      发布
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      count: 5,
      value: 3,
      value1: 3,
      value2: 3,
      values: '',
      action: 'https://wenzhen.jiangkukeji360.com/api/common/upload',
      fileList: [],
      list: [],
      formData: {
        token: uni.getStorageSync('user_info').token
      },
      imgbox: []
    };
  },
  //方法
  methods: {
    onUploaded(res) {
      let imgs = [];
      res.map((i) => {
        imgs.push(i.response.data.url);
      });
      this.imgbox = [...new Set(imgs)];

      console.log(typeof this.imgbox, this.imgbox);
    },
    fabu() {
      this.api({
        url: '/api//shop/addEva',
        method: 'post',
        data: {
          type: 2,
          content: this.values,
          order_id: this.list.order_id,
          star_one: this.value,
          star_two: this.value1,
          star_three: this.value2,
          images: this.imgbox
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.list = JSON.parse(options.type);
    console.log(this.list);
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
</style>
